/**
 * 基于jtopo-editor.js的二次封装
 * designed by wenyuan
 * github: https://github.com/wenyuan/jtopo_topology
 */
function getQueryVariable(variable) {
  var query = window.location.search.substring(1)
  var vars = query.split('&')
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split('=')

    if (pair[0] == variable) {
      return pair[1]
    }
  }

  return false
}
/**
 * 提供拓扑图面板相关操作的函数集，编辑器继承其全部功能
 */
function TopologyPanel() {}

/**
 * 保存序列化的拓扑图JSON数据到服务器
 */
TopologyPanel.prototype.saveTopology = function (url) {
  editor.mainMenu.hide()
  let self = this
  // 保存container状态
  let containers = editor.utils.getContainers()
  for (let c = 0; c < containers.length; c++) {
    let temp = []
    let nodes = containers[c].childs
    for (let n = 0; n < nodes.length; n++) {
      temp.push(nodes[n].nodeId)
    }
    containers[c].childNodes = temp.join(',')
  }
  let topologyJSON = editor.stage.toJson()
  alert('保存成功')
  // $.ajax({
  //     type: 'POST',
  //     url: url,
  //     async: false,
  //     data: JSON.stringify({'topology_json': topologyJSON}),
  //     contentType: 'application/json',
  //     dataType: 'json',
  //     error: function () {
  //         // alert('服务器异常，请稍后重试..')
  //     },
  //     success: function (response) {
  //         // 错误处理
  //         if (response.code !== 200) {
  //             console.error(response.msg)
  //         } else {
  //             editor.stageMode = 'edit'
  //             self.replaceStage(url)
  //         }
  //     }
  // })
}

/**
 * 重置拓扑图
 */
TopologyPanel.prototype.resetTopology = function (url) {
  editor.stageMode = 'edit'
  this.replaceStage(url)
}

/**
 * 加载指定id的拓扑图JSON数据结构
 * @param topologyGuid 拓扑 表记录ID
 * @param backImg 拓扑图的背景图片
 */
TopologyPanel.prototype.loadTopology = function (url, topologyGuid, backImg) {
  const ent_id = getQueryVariable('ent_id')
  const project_id = getQueryVariable('project_id')
  // 获取传过来的设备编号

  const data = getQueryVariable('data')
  // console.log('1111',data);
  let datalist
  if (data) {
    datalist = data.split(',')
  }
  $.ajax({
    type: 'GET',
    // url: url + '?ent_id=' + ent_id,
    url: url + '?ent_id=' + ent_id + '&project_id=' + project_id,
    async: false,
    contentType: 'application/json',
    dataType: 'json',
    error: function () {
      // alert('服务器异常，请稍后重试..')
    },
    success: function (response) {
      // 错误处理
      if (response.code !== 2000) {
        alert(response.msg)
      } else if (response.code === 2000 && $.isEmptyObject(response.result)) {
        // 拓扑不存在,创建一个空白的拓扑图
        let initTopologyJson = {
          version: '0.4.8',
          wheelZoom: 1,
          width: 1640,
          height: 948,
          id: 'ST172.19.105.52015100809430700001',
          childs: [
            {
              elementType: 'scene',
              id: 'S172.19.105.52015100809430700002',
              translateX: -121.82,
              translateY: 306.72,
              scaleX: 1,
              scaleY: 1,
              childs: []
            }
          ]
        }
        editor.init(topologyGuid, backImg, initTopologyJson, '')
      } else {
        // 拓扑存在,渲染拓扑图
        let topologyJson = response.result
        // console.log(topologyJson, 'topologyJson');
        topologyJson.childs[0].childs.forEach((o) => {
          // console.log(o,'---');
          o.dragable = false
          // if(o.text === '2#漆房喷漆') {
          //   o.nodeImage = '排气口.png'
          //   // o.visible = false
          // }

          if (o.param__name === '1') {
            // 电表
            if (o.dev_status == 1) {
              o.nodeImage = 'running.png'
            } else if (o.dev_status == 0) {
              o.nodeImage = '置灰态.png'
            } else if (o.dev_status == 2) {
              o.nodeImage = 'error.png'
            }
            if (datalist) {
              datalist.forEach((item) => {
                if (o.param__id == item) {
                  console.log(o.param__id, 'o.param__id--')
                  o.nodeImage = 'icon_server.png'
                  console.log(o.nodeImage, ' o.nodeImage--')
                }
              })
            }
          }
        })
        // console.log(topologyJson, 'topologyJson');

        editor.init(topologyGuid, backImg, topologyJson, '')
        const containers = editor.utils.getAllContainers()
        topologyJson.childs[0].childs.forEach((o) => {
          if (o.childContainer) {
            let parent = containers.filter((o1) => o1.id == o.id)[0]
            o.childContainer.forEach((id) => {
              const t = containers.filter((o1) => o1.id == id)[0]
              if (id && t) {
                parent.add(t)
              }
            })
          }
        })
      }
    }
  })
}

/**
 * 传入JSON形式的拓扑图数据,绘制拓扑图。如果数据结构不正确,返回空拓扑图
 * @param topologyJson json形式的拓扑结构数据
 * @param backImg 拓扑图的背景图片
 */
TopologyPanel.prototype.loadTopologyByJson = function (topologyJson, backImg) {
  try {
    JTopo.replaceStageWithJson(topologyJson)
    if (
      editor.stage &&
      editor.scene &&
      editor.scene.childs &&
      editor.scene.childs.length > 0
    ) {
      editor.stage.centerAndZoom()
    }
  } catch (e) {
    console.error(e)
    let initTopologyJson = {
      version: '0.4.8',
      wheelZoom: 1,
      width: 1640,
      height: 948,
      id: 'ST172.19.105.52015100809430700001',
      childs: [
        {
          elementType: 'scene',
          id: 'S172.19.105.52015100809430700002',
          translateX: -121.82,
          translateY: 306.72,
          scaleX: 1,
          scaleY: 1,
          childs: []
        }
      ]
    }
    JTopo.replaceStageWithJson(initTopologyJson)
    if (
      editor.stage &&
      editor.scene &&
      editor.scene.childs &&
      editor.scene.childs.length > 0
    ) {
      editor.stage.centerAndZoom()
    }
  }
}

/**
 * 编辑器对象,原型继承拓扑图面板对象,提供编辑器的主要功能
 */
function TopologyEditor() {
  // 绘图参数
  this.config = {
    // Stage属性
    stageFrames: 500, // 舞台播放的帧数/秒
    defaultScal: 0.95, // 鼠标滚轮缩放比例
    eagleEyeVsibleDefault: false, // 是否显示鹰眼对象
    // Node属性
    nodeAlpha: 1, // 节点透明度,取值范围[0-1]
    nodeStrokeColor: '22,124,255', // 节点描边的颜色
    nodeFillColor: '22,124,255', // 节点填充颜色
    nodeShadow: false, // 节点是否显示阴影
    nodeShadowColor: 'rgba(0,0,0,0.5)', // 节点阴影的颜色
    nodeFont: '16px Consolas', // 节点字体
    nodeFontColor: '0,0,0', // 节点文字颜色,如"255,255,0"
    nodeDefaultWidth: 100, // 新建节点默认宽
    nodeDefaultHeight: 100, // 新建节点默认高
    nodeBorderColor: 'black', // 节点容器边框颜色,如"255,255,0"
    nodeBorderRadius: 6, // 节点半径，非圆节点有此属性会变形
    nodeRotateValue: 0.5, // 节点旋转的角度(弧度)
    nodeScale: 0.2, // 节点缩放幅度(此处保证X和Y均等缩放)
    // Link属性
    linkAlpha: 1, // 连线透明度,取值范围[0-1]
    linkStrokeColor: '123,165,241', // 连线的颜色
    linkFillColor: '123,165,241',
    linkShadow: false, // 是否显示连线阴影
    linkShadowColor: 'rgba(0,0,0,0.5)',
    linkFont: '20px Consolas', // 节点字体
    linkFontColor: 'black', // 连线文字颜色,如"255,255,0"
    linkArrowsRadius: 0, // 线条箭头半径
    linkDefaultWidth: 3, // 连线宽度
    linkOffsetGap: 40, // 折线拐角处的长度
    linkDirection: 'horizontal', // 折线的方向
    // Container属性
    containerAlpha: 1,
    containerZindex: -9999,
    containerStrokeColor: '22,124,255',
    containerFillColor: '255,255,255',
    containerShadow: false,
    containerShadowColor: 'rgba(0,0,0,0.5)',
    containerFont: '18px Consolas',
    containerFontColor: 'black',
    containerBorderColor: 'black',
    containerBorderRadius: 30
  }
  // 布局参数
  this.layout = {}
  // 绘图区属性
  this.stage = null
  this.scene = null
  // 当前模式
  this.stageMode = 'edit'
  // 默认连线类型
  this.lineType = 'line'
  // 当前选择的节点对象
  this.currentNode = null
  // 当前选择的连线对象
  this.currentLink = null
  // 节点右键菜单DOM对象
  this.nodeMenu = $('#node-menu')
  // 连线右键菜单DOM对象
  this.lineMenu = $('#line-menu')
  // 全局右键菜单
  this.mainMenu = $('#main-menu')
  // 布局管理菜单
  this.layoutMenu = $('#layout-menu')

  // 加入布局
  this.addGroupMenu = $('#add-group-menu')

  // 节点文字方向
  this.nodeTextPosMenu = $('#node-text-pos-menu')
  // 节点分组菜单
  this.groupMangeMenu = $('#group-mange-menu')
  // 节点对齐菜单
  this.groupAlignMenu = $('#group-align-menu')
  this.alignGroup = $('#align-group')
  // 分组的容器管理菜单
  this.containerMangeMenu = $('#container-mange-menu')
  // 调用构造函数,继承TopologyPanel类
  TopologyPanel.call(this)
}

// 原型继承
TopologyEditor.prototype = new TopologyPanel()

/**
 * 替换当前舞台,用于编辑保存后重新加载
 * @param topologyGuid
 */
TopologyEditor.prototype.replaceStage = function (url) {
  // var self = this
  $.ajax({
    type: 'GET',
    url: url,
    async: false,
    contentType: 'application/json',
    dataType: 'json',
    error: function () {
      // alert('服务器异常，请稍后重试..')
    },
    success: function (response) {
      // 错误处理
      if (response.code !== 200) {
        console.error(response.msg)
      } else {
        let topologyJson = response.data.topology_json
        JTopo.replaceStageWithJson(topologyJson)
        if (
          editor.stage &&
          editor.scene &&
          editor.scene.childs &&
          editor.scene.childs.length > 0
        ) {
          editor.stage.centerAndZoom()
        }
      }
    }
  })
}
/**
 * 编辑器初始化方法,根据请求返回结果加载空白的或者指定结构的拓扑编辑器
 * @param topologyGuid  拓扑记录ID
 * @param backImg     背景图片
 * @param topologyJson    拓扑JSON结构
 */
TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
  if (!topologyJson) {
    // alert('加载拓扑编辑器失败!')
    return
  }
  this.topologyGuid = topologyGuid
  // 创建jTopo舞台屏幕对象
  let canvas = document.getElementById('topology-canvas')
  canvas.width = $('#topology-body').width()
  canvas.height = $('#topology-body').height()
  // 加载空白的编辑器
  if (topologyJson === '-1') {
    this.stage = new JTopo.Stage(canvas) // 定义舞台对象
    this.scene = new JTopo.Scene(this.stage) // 定义场景对象
  } else {
    this.stage = JTopo.createStageFromJson(topologyJson, canvas) // 根据保存好的jsonStr(拓扑结构)创建舞台对象
    this.scene = this.stage.childs[0] // 场景对象列表,childs是舞台的属性
  }

  // 滚轮缩放
  this.stage.frames = this.config.stageFrames // 设置当前舞台播放的帧数/秒
  this.stage.wheelZoom = this.config.defaultScal // 鼠标滚轮缩放操作比例
  this.stage.eagleEye.visible = this.config.eagleEyeVsibleDefault // 是否开启鹰眼
  this.stage.mode = this.stageMode
  // 设置舞台模式
  // 背景由样式指定
  // this.scene.background = backImg;
  // 用来连线的两个节点
  this.tempNodeA = new JTopo.Node('tempA')
  this.tempNodeA.setSize(1, 1)
  this.tempNodeZ = new JTopo.Node('tempZ')
  this.tempNodeZ.setSize(1, 1)
  this.beginNode = null
  this.link = null
  let self = this

  // 第一次进入拓扑编辑器,生成stage和scene对象
  if (topologyJson === '-1') {
    this.saveTopology(false)
  }
  editor.utils.setNormalMode()
  editor.stage.childs.forEach(function (s) {
    s.childs.forEach(function (n) {
      n.dragable = false
    })
  })

  // 鼠标单击节点事件
  this.scene.click(function (event) {
    if (event.target != null && event.target instanceof JTopo.Node) {
      const t = event.target
      if (t.param__name === '1') {
        // 电表
        // iframe 页面 发消息
        window.parent.postMessage(
          {
            type: '1',
            param__id: t.param__id
          },
          '*'
        )
        // // 父页面 收消息
        // window.addEventListener('message',function(res){
        // console.log(res.data.msg);
        // });
      }
    }
  })
}

// 编辑器实例
var editor = new TopologyEditor('mainControl')

// 工具方法
editor.utils = {
  // 获取所有分组
  getAllContainers: function () {
    return editor.stage.find('container')
  },
  exportAsImage: function () {
    editor.stage.exportAsImage()
  },
  setEditMode: function () {
    editor.mode = 'edit'
  },
  setNormalMode: function () {
    editor.stage.mode = 'normal'
  },
  // 获取所有的容器对象
  getNodes: function () {
    let nodes = []
    editor.stage.childs.forEach(function (s) {
      s.childs.forEach(function (n) {
        if (n.elementType === 'node' && n.text == '企业总电') {
          // console.log(n);
          // n.setImage('static/jtopo/img/1.png');
          // n.nodeImage = '1.png';
          nodes.push(n)
        }
      })
    })
    return nodes
  },
  // 获取所有的容器对象
  getContainers: function () {
    let containers = []
    editor.stage.childs.forEach(function (s) {
      s.childs.forEach(function (n) {
        if (n.elementType === 'container') {
          containers.push(n)
        }
      })
    })
    return containers
  }
}
